import { useState } from 'react'
import { useTasksDispatch } from './TasksContext'

export default function AddTask() {
  const [text, setText] = useState<string>('')
  const dispatch = useTasksDispatch()

  return (
    <>
      <input
        type="text"
        value={text}
        onChange={e => setText(e.target.value)}
        placeholder="Add a new task"
      />
      <button
        onClick={() => {
          setText('')
          dispatch({ type: 'added', text: text, id: nextId++ })
        }}
      >
        Add Task
      </button>
    </>
  )
}

let nextId = 3 // Start from 3 to avoid conflict with existing tasks
